$color-body-bg: #000000;
$color-game-bg: #FDCBC4;
$color-message: #B53121;

body{
  font-family: fantasy;
  background:$color-body-bg;
  &:after{
    content:'';
    display:block;
    position:fixed;
    top:50%;
    right:18%;
    left:18%;
    border: .5vw solid white;
    bottom:44%;
    padding-top:39%;
    transform: translateY(-50%);
    box-sizing:border-box;
  }

}

.helper{
  position:fixed;
  bottom:1rem;
  z-index:100;
  color:#fff;
  text-align:center;
  left:0;
  right:0;
  pointer-events:none;
  font-size:3vw;
  opacity:.5;
}

.viewport{
  display:block;
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  box-sizing:border-box;

  &:before{
    content:'';
    display:block;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:20%;
    background:$color-body-bg;
    z-index:10; 
  }

  &:after{
    content:'';
    display:block;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:20%;
    background:$color-body-bg;
    z-index:10; 
  }

}

.game{
  position:absolute;
  top:50%;
  right:0;
  left:0;
  transform:translateY(-50%);
}


.results{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:flex; 
  align-items:center;
  justify-content:center;
  transform:translateY(100%);
  transition: transform 1s ease;
  color:$color-message;
  font-size:6vw;
  text-shadow: 2px 2px 2px #fff;

  &.shown{
    transform:translateY(0);
  }
}

.columns{
  background-color:$color-game-bg;
  background-size:100% 100%;
  animation-timing-function: linear;
  animation-fill-mode: forwards;

  &.columns-top{
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/233661/mario-top.svg');    
  }  

  &.columns-center{
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/233661/mario-center.svg');    
  }    

  &.columns-bottom{
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/233661/mario-bottom.svg');    
  }  

  &:after{
    content:'';
    display:block;
    padding-top: 12.07%;
  }
}


@keyframes ltr-transition-0 {
  0%{
    background-position: 0vw;
  }
  100%{
    background-position: 33.3333vw;
  }
}

@keyframes ltr-transition-1 {
  0%{
    background-position: 33.3333vw;
  }
  100%{
    background-position:66.6666vw;
  }
}

@keyframes ltr-transition-2 {
  0%{
    background-position: 66.6666vw;
  }
  100%{
    background-position: 100vw;
  }
}

@keyframes rtl-transition-0 {
  0%{
    background-position: -33.3333vw;
  }
  100%{
    background-position: -66.6666vw;
  }
}

@keyframes rtl-transition-1 {
  0%{
    background-position: -100vw;
  }
  100%{
    background-position: -133.3333vw;
  }
}

@keyframes rtl-transition-2 {
  0%{
    background-position: -166.6666vw;
  }
  100%{
    background-position: -200vw;
  }
}
